<!DOCTYPE html>
<html>
<head>
    <title>TestView</title>
</head>
<body>
<div class='page_component'>
    <p>page_component with many elements</p>
    <input type='text' id="street1" class="street1"/>
    <input type='text' id="city1" class="city" value="id city class city"/>
</div>

<div class='page_component' id="container">
    <input type='text' id="street2" class="street1"/>
    <input type='text' id="city2" class="city" value="class city but div id container"/>
</div>
<br/>

<div id='feature_1' class='page_component'>
    <label for='feature_checkbox1'>Enable Checkbox for TextArea</label>
    <input id="feature_checkbox1" type="checkbox" class="check" onclick="featureEnabler('feature_checkbox1','feature_textarea1');"/><br/>
    <textarea id='feature_textarea1' cols="30" readonly disabled style="background-color:#eee">CheckboxTextField 1</textarea>
</div>

<div id='feature_2' class='page_component'>
    <label for='feature_checkbox2'>Golf Course</label>
    <input id='feature_checkbox2' type='checkbox' class="check" onclick="featureEnabler('feature_checkbox2','feature_textarea2');"/><br/>
    <textarea id='feature_textarea2' cols="30" readonly disabled style="background-color:#eee">CheckboxTextField 2</textarea>
</div>

<script type="text/javascript">
    function featureEnabler(cbe, txte) {
        var cb = document.getElementById(cbe);
        var txt = document.getElementById(txte);
        if (cb.checked == true) {
            txt.readOnly = '';
            txt.disabled = '';
            txt.style = 'background-color: #fff';
        } else {
            txt.readOnly = 'readonly';
            txt.disabled = 'disabled';
            txt.value = '';
            txt.style = 'background-color: #eee';
        }
    }
</script>
<br/>

<div>
    <p>DateSelector</p>
    <input type='text' id="month_field" class="street1"/>
    <input type='text' id="day_field" class="city"/>
    <input type='text' id="year_field" class="city"/>
</div>

<div>
    <p>RadioGroup named tool</p>
    <label for='tool1'>Cucumber</label>
    <input type='radio' name="tool" value="cucumber" id="tool1"/>
    <label for='tool2'>Tomato</label>
    <input type='radio' name="tool" value="tomato" id="tool2"/>
    <label for='tool3'>Other</label>
    <input type='radio' name="tool" value="other" id="tool3" checked/>
</div>

<div>
    <p>RadioGroup named toolkey</p>
    <input type='radio' name="toolkey" value="a cucumber"/><label for=""
    <input type='radio' name="toolkey" value="a tomato"/>
    <input type='radio' name="toolkey" value="some other" checked/>
</div>

<div>
    <p>CheckboxGroup named fruit</p>
    <label for='fruit1'>Cucumberama</label>
    <input type='checkbox' name="fruit" value="cucumber" id="fruit1"/>
    <label for='fruit2'>Tomatorama</label>
    <input type='checkbox' name="fruit" value="tomato" id="fruit2"/>
    <label for='fruit3'>Other</label>
    <input type='checkbox' name="fruit" value="other" id="fruit3" checked/>
</div>

<div>
    <p>CheckboxGroup named fruitkey</p>
    <input type='checkbox' name="fruitkey" value="a cucumberama"/>
    <input type='checkbox' name="fruitkey" value="a tomatorama"/>
    <input type='checkbox' name="fruitkey" value="some otherama" checked/>
</div>

<div>
    <select id="fruit_list">
        <option value="tomato">Tomato</option>
        <option value="gurken">Cucumber</option>
        <option label="Other"/>
        <option selected>Default</option>
    </select>
</div>

<div>
    <select multiple size="5" name="multiselect" id="multiselect">
        <option value="1">Danish</option>
        <option selected="selected" value="2">English</option>
        <option selected value="3">Norwegian</option>
        <option label='Polish'/>
        <option>Swedish</option>
    </select>
</div>

<div id="read_only_elements">
    <span id="read_only_span">Text In Span</span>
</div>
</body>
</html>